import { useEffect } from 'react';
import styles from './index.less';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
const index = () => {
  useEffect(() => {
    var chartDom = document.getElementById('map');
    var myChart = echarts.init(chartDom);
    var option;
    
    option = {
      backgroundColor: '#212529',
      textStyle: {color: '#fff'},
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: false,
        },
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
        showSymbol: false,
        lineStyle: {
          shadowColor: '#fff',
          shadowBlur: 10,
          color: {
            type: 'linear',
            colorStops: [
              {offset: 0, color: '#fff'},
              {offset: 1, color: 'yellow'},
            ],
          },
        },
      }],
    };
    
    option && myChart.setOption(option);
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }, []);
  return <div id="map" style={{ minWidth: '800', maxHeight: '800' }}></div>;
};

export default index;
